<template>
	<view>
		<official-account></official-account>

		<view class="u-flex u-p-20">
			<view class="u-w-236 u-h-60 u-l-h-60 u-text-center u-b-r-20 u-font-28" v-for="(item,index) in lifeList"
				:key="index" @click="lifeClick(item)" :class="lifeType==item.type?'bg_FC3533FF cl_FFF':'bg_666666'">
				{{item.name}}
			</view>
		</view>

		<view class="one1">
			<view class="u-p-l-20 u-p-r-20 u-b-r-20 bg_FFFFFF">
				<view v-show="lifeType==1">
					<view style="border-bottom: 1rpx solid #E2E2E2;">
						<u-input v-model="phone" type='number' placeholder='绑定充值手机号码'></u-input>
					</view>
					<view v-if="checkPhone" class="error">{{ checkPhone }}</view>
					<view class="u-flex">
						<text>运营商：</text>
						<u-radio-group v-model="mobile_type">
							<u-radio name="1">移动</u-radio>
							<u-radio name="2">联通</u-radio>
							<u-radio name="3">电信</u-radio>
							<u-radio name="4">携号转网</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view v-show="lifeType==2" class="u-font-28">
					<view style="border-bottom: 1rpx solid #E2E2E2;">
						<u-input v-model="gas_no" placeholder='请输入燃气号'></u-input>
					</view>
				</view>
				<view v-show="lifeType==3" class="u-font-28">
					<view class="u-flex" style="border-bottom: 1rpx solid #E2E2E2;">
						<view class="u-m-l-30 u-w-300">
							<u-input v-model="elec_name" placeholder='请输入户名'></u-input>
						</view>
						<view class="u-m-l-30 u-w-300">
							<u-input v-model="elec_no" type="number" placeholder='请输入电费号'></u-input>
						</view>
					</view>
					<view class="u-m-l-30 u-w-300">
						<u-input v-model="area_name" disabled @click="cityShow=true" placeholder='请选择省份'></u-input>
					</view>
				</view>
			</view>
			<view class="u-p-20 u-m-t-20 u-b-r-20 bg_FFFFFF">
				<view class="u-flex u-row-between">
					<view class="u-weight">选择充值金额</view>
					<view class="u-font-32 u-weight u-text-right"
						@click="$u.route(`/subcontract/Rechargemoney/massage/massage?type=${lifeType}`)">
						充值记录 <u-icon class="u-m-l-5" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="u-m-t-20">
					<u-row>
						<u-col span='4' v-for="(item,index) in list " :key="index">
							<view class="u-m-t-20 u-h-70 u-l-h-70 u-text-center" @click="choes(item)"
								:class="num==item.id?'choes':'choes1'">{{item.total_money}}元</view>
						</u-col>
					</u-row>
				</view>
				<view class="u-m-t-20 cl_FB473CFF u-font-28">
					需要扣除{{dcScoreList.pay_money||''}}钱，消耗{{dcScoreList.deduct_amount||''}}抵扣金
				</view>
				<view class="u-m-t-20 cl_898989FF u-font-28 u-text-right">抵扣金<text
						class="cl_FB473CFF">￥{{dcScoreList.deduct||''}}</text></view>
			</view>
		</view>
		<view class="one1 u-p-t-20">
			<view class="u-flex-col u-col-center">- 支付方式 -</view>
		</view>
		<view class="one1 u-p-30">
			<view class="bg_FFFFFF u-b-r-20">
				<view @click="pays='deposit'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view class="u-flex">
						<view class="u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/card.png" mode="aspectFill" width="50rpx"
								height='50rpx'></u-image>
							<view class="u-m-l-30 u-font-28 u-weight">钱包支付</view>
						</view>
						<view class="u-m-l-30">
							<view class="cl_898989FF u-font-24">余额<text class="cl_FB473CFF">￥{{userinfo.user_wallet}}</text></view>
						</view>
					</view>
					<view class="u-flex">
						<view>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='deposit'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else></u-image>
						</view>
					</view>
				</view>

				<view @click="openEpayDialog" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view>
						<view class="u-flex">
							<u-image src="http://xcx.itcwc.com/wxImg/5dcf4786109a5.png" mode="aspectFill" width="50rpx" height='50rpx'></u-image>
							<view class="u-m-l-30 u-font-28 u-weight">易支付</view>
						</view>
					</view>
					<view class="u-flex">
						<view>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays == 'epay'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else></u-image>
						</view>
					</view>
				</view>

				<view @click="pays='wechat'" class="u-flex u-row-between u-p-30" style="border-bottom: 1rpx solid #F6F6F6FF;">
					<view>
						<view class="u-flex">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="50rpx"
								height='50rpx'></u-image>
							<view class="u-m-l-30 u-font-28 u-weight">微信支付</view>
						</view>
					</view>
					<view class="u-flex">
						<view>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c1.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-if="pays=='wechat'"></u-image>
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/c.png" mode="aspectFill" width="30rpx"
								height='30rpx' v-else></u-image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-h-20"></view>

		<u-popup v-model="show" mode='center'>
			<view class="u-rela u-p-50 u-w-700">
				<view class="u-font-50 u-weight">充值须知</view>
				<view class="u-fix u-r-60 u-t-300">
					<u-image src="https://www.sqkjkj.vip/wxImg/common/sign/heart.png" mode="aspectFill" width="216rpx"
						height='274rpx'></u-image>
				</view>
				<view class="u-m-t-20">
					<u-parse
						:html="lifeType==1?userinfo.recharge_note:lifeType==2?conf.gas_charge_remark:conf.elec_charge_remark"></u-parse>
				</view>
				<view @click="show=false"
					class="u-m-t-20 u-w-400 u-h-92 u-l-h-92 u-font-30 u-text-center u-auto cl_FFF u-b-r-20"
					style="background-color: #FC3533FF;">我知道了</view>
			</view>
		</u-popup>
		<u-popup v-model="shows" mode='center'>
			<view class="u-p-30 u-h-200">
				<u-message-input :focus="true" :maxlength='6' @finish="finish"></u-message-input>
			</view>
		</u-popup>
		<u-select v-model="cityShow" mode="mutil-column-auto" child-name="child" value-name="id" label-name="area_name"
			:list="address_list" @confirm="cityFirm"></u-select>
		<view class="u-w-750 u-p-20 bg_FFFFFF">
			<view>
				<u-parse
					:html="lifeType==1?userinfo.recharge_note:lifeType==2?conf.gas_charge_remark:conf.elec_charge_remark"></u-parse>
			</view>
			<view class="u-w-700 u-auto u-h-80 u-l-h-80 u-text-center u-b-r-13 cl_FFF">
				<u-checkbox v-model="confirmed">我已阅读充值说明</u-checkbox>
			</view>
			<view class="u-w-700 u-auto u-h-80 u-l-h-80 u-text-center u-b-r-13 cl_FFF"
				style="background: linear-gradient(-64deg, #FF382C, #FF633F);" @click="save">提交</view>
		</view>

		<u-popup v-model="showEpayDialog" mode="center" width="80%" border-radius="10">
			<view class="epay-dialog">
				<view class="epay-dialog-title">请选择支付方式</view>
				<view class="epay-dialog-content">
					<view class="epay-payment-option" @click="selectEpayMethod('wxpay')">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayParams.epay_type === 'wxpay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/wx.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">微信支付</view>
					</view>
					<view class="epay-payment-option" @click="selectEpayMethod('alipay')" v-if="!isWechatMP">
						<view class="radio-button">
							<view class="radio-inner" :class="{ 'radio-selected': epayParams.epay_type === 'alipay' }"></view>
						</view>
						<view class="payment-icon">
							<u-image src="https://www.sqkjkj.vip/wxImg/common/shop/zf.png" mode="aspectFill" width="40rpx"
								height='40rpx'></u-image>
						</view>
						<view class="payment-name">支付宝支付</view>
					</view>
				</view>
				<view class="epay-dialog-footer">
					<view class="epay-dialog-btn cancel-btn" @click="showEpayDialog = false">取消</view>
					<view class="epay-dialog-btn confirm-btn" @click="confirmEpayMethod">确定</view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: "",
			mobile_type: '',
			mobile: '',
			num: '',
			show: false,
			pays: 'wechat',
			pays1: "",
			list: [],
			pay_money: 0,
			userinfo: '',
			shows: false,
			pays_list: '',
			dcScoreList: '',
			lifeType: '1',
			lifeList: [],
			gas_no: '',
			elec_no: '',
			elec_name: '',
			cityShow: false,
			address_list: [],
			area_name: '',
			area_id: '',
			conf: [],
			confirmed: false,
			innerAudioContext: null,
			showEpayDialog: false,
			epayParams: {
				epay_type: 'wxpay',
				method: ''
			},
			isWechatMP: false
		}
	},
	computed: {
		checkPhone() {
			const reg = new RegExp(/^1\d{10}$/)
			if (!this.phone) {
				return '请填写手机号码'
			}
			if (!reg.test(this.phone)) {
				return '手机号码错误'
			}
			return false
		}
	},
	onLoad() {
		this.apply_join()
		this.lifeRechargeType()
		this.userinfo = uni.getStorageSync("userinfo")
		this.conf = uni.getStorageSync("conf")
		this.mobile = this.userinfo.mobile
		this.phone = this.userinfo.mobile
		this.detectDeviceType()

		this.innerAudioContext = uni.createInnerAudioContext();
		this.innerAudioContext.autoplay = true;
		this.innerAudioContext.src = 'https://img.sqkjkj.vip/uploads/files/20231103/5f8d59e6cbb564d5e3dca5aefd8a914f';
	},
	onHide() {
		this.innerAudioContext.stop()
	},
	onShow() {
		if (uni.getStorageSync('gas_no')) {
			this.gas_no = uni.getStorageSync('gas_no')
		}
		if (uni.getStorageSync('elec_no')) {
			this.elec_no = uni.getStorageSync('elec_no')
		}
	},
	methods: {
		apply_join() {
			this.$api.apply_join({ level: "2" }, res => {
				this.address_list = res.data.data
			})
		},
		cityFirm(e) {
			this.area_name = `${e[0].label}${e[1].label}`
			this.area_id = e[1].value
		},
		confirm(e) {
			this.area = `${e[0].label}${e[1].label}${e[2].label}`
			this.address_id = e[2].value
		},
		backs() {
			uni.navigateBack()
		},
		lifeRechargeType() {
			this.$api.lifeRechargeType({}, res => {
				if (res.data.code == 1) {
					this.lifeList = res.data.data
					this.massage()
				}
			})
		},
		lifeClick(item) {
			this.lifeType = item.type
			this.massage()
		},
		massage() {
			this.num = ''
			this.$api.choes_my_phone({ type: this.lifeType }, res => {
				if (res.data.code == 1) {
					this.list = res.data.data.money_list
					if (this.list.length > 0) {
						this.num = this.list[0].id
						this.getDcScore()
					}
				}
			})
		},
		getDcScore() {
			this.$api.getDcScore({
				type: this.lifeType,
				recharge_money_id: this.num
			}, res => {
				if (res.data.code == 1) {
					this.dcScoreList = res.data.data
				}
			})
		},
		choes(item) {
			this.num = item.id
			this.pay_money = item.pay_money
			this.getDcScore()
		},
		save() {
			if (!this.confirmed) {
				uni.showToast({
					icon: 'none',
					title: '请阅读充值说明'
				})
				return
			}
			if (this.num == 0 || this.num == '') {
				uni.showToast({
					icon: 'none',
					title: '请选择充值金额'
				})
			} else if (this.pays == '') {
				uni.showToast({
					icon: 'none',
					title: '请选择支付方式'
				})
			} else {
				let params = {}
				if (this.lifeType == 1) {
					if (this.phone == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入手机号'
						})
						return
					}
					if (this.mobile_type == '') {
						uni.showToast({
							icon: 'none',
							title: '请选择运营商'
						})
						return
					}
					params = {
						mobile: this.phone,
						mobile_type: this.mobile_type
					}
				}
				if (this.lifeType == 2) {
					if (this.gas_no == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入燃气号'
						})
						return
					}
					params = {
						gas_no: this.gas_no
					}
					uni.setStorageSync('gas_no', this.gas_no)
				}
				if (this.lifeType == 3) {
					if (!this.elec_name) {
						uni.showToast({
							icon: 'none',
							title: '请输入户名'
						})
						return
					}
					if (this.elec_no == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入电费号'
						})
						return
					}
					if (this.area_id == '') {
						uni.showToast({
							icon: 'none',
							title: '请选择省份'
						})
						return
					}
					params = {
						elec_no: this.elec_no,
						elec_name: this.elec_name,
						area_id: this.area_id
					}
					uni.setStorageSync('elec_no', this.elec_no)
				}
				params = Object.assign({ type: this.lifeType, money_id: this.num }, params)
				this.$api.pay_my_phone(params, res => {
					if (res.data.code == 1) {
						this.pays_list = res.data.data.pay_info
						if (this.pays == 'deposit') {
							this.pay();
						}

						if (this.pays == 'epay') {
							this.pay();
							return
						}

						if (this.pays == "wechat" || this.pays == 'alipay') {
							let params = {
								target_id: this.pays_list.target_id,
								target_type: this.pays_list.target_type,
								pay_type: this.pays,
								// #ifdef APP-PLUS
								client: 'APP',
								// #endif
								// #ifdef MP-WEIXIN
								client: 'JSAPI',
								// #endif
								trade_pwd: ''
							}
							// #ifdef APP-PLUS
							this.$com.wxPay(params, this.pays).then(ok => {
								this.$refs.uToast.show({
									title: ok.data.msg,
									type: 'success',
									callback: cal => {
										this.$u.route({
											type: 'reLaunch',
											url: '/pages/my/my'
										})
									}
								})
							})
							// #endif
							// #ifdef MP-WEIXIN
							this.$com.weChatPay(params, this.pays).then(ok => {
								this.$refs.uToast.show({
									title: ok.msg,
									type: 'success',
									callback: cal => {
										this.$u.route({
											type: 'reLaunch',
											url: '/pages/my/my'
										})
									}
								})
							})
							// #endif
						}
					}
				})
			}
		},
		finish(e) {
			this.pay(e)
		},
		pay(e = '') {
			if (this.pays == 'epay') {
				let params = {
					target_id: this.pays_list.target_id,
					target_type: this.pays_list.target_type,
					pay_type: this.pays,
					type: this.epayParams.epay_type,
					method: this.epayParams.method,
					trade_pwd: e,
					random: 1,
					// #ifdef APP-PLUS
					client: 'APP',
					// #endif
					// #ifdef MP-WEIXIN || MP-ALIPAY
					client: 'JSAPI',
					// #endif
					// #ifdef H5
					client: 'WAP',
					// #endif
				}
				this.$com.easyPay(params, this.pays);
			} else {
				uni.showLoading({
					title: '支付中',
					mask: true
				});
				this.$api.go_pay2({
					target_id: this.pays_list.target_id,
					target_type: this.pays_list.target_type,
					pay_type: this.pays,
					client: 'APP',
					trade_pwd: e,
					random: 1
				}, res => {
					uni.hideLoading();
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'none',
							title: '充值成功'
						})
						this.shows = false
						setTimeout(() => {
							uni.navigateBack()
						}, 500)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				})
			}
		},
		wxpay(obj) {
			uni.showToast({
				icon: 'none',
				title: '暂时仅支持余额'
			})
		},
		selectEpayMethod(method) {
			this.epayParams.epay_type = method
			this.showEpayDialog = false
		},
		confirmEpayMethod() {
			this.showEpayDialog = false
		},
		openEpayDialog() {
			this.pays = 'epay'
			this.showEpayDialog = true
		},
		detectDeviceType() {
			// #ifdef H5
			this.epayParams.method = 'web'
			this.isWechatMP = false
			// #endif

			// #ifdef MP-WEIXIN
			this.epayParams.method = 'jsapi'
			this.isWechatMP = true
			// #endif

			// #ifdef MP-ALIPAY
			this.epayParams.method = 'jsapi'
			this.isWechatMP = false
			// #endif

			// #ifdef APP-PLUS
			this.epayParams.method = 'web'
			this.isWechatMP = false
			// #endif
		}
	}
}
</script>

<style scoped lang="scss">
page {
	background-color: #f5f5f5;
}

.one1 {
	background-color: #f5f5f5;

	.error {
		font-size: 24rpx;
		color: red;
	}
}

.choes {
	background-color: #3298FD;
	color: #ffffff;
}

.choes1 {
	background-color: #E8F3FF;
	color: #3298FD;
}

/* .ones {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;

		background: rgba(0, 0, 0, .4);
	} */

/* 易支付选择弹窗样式 */
.epay-dialog {
	background-color: #fff;
	padding: 30rpx;
}

.epay-dialog-title {
	font-size: 32rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.epay-dialog-content {
	padding: 20rpx 0;
}

.epay-payment-option {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.radio-button {
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 2rpx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
}

.radio-inner {
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background-color: transparent;
}

.radio-selected {
	background-color: #3298FD;
}

.payment-icon {
	margin-right: 20rpx;
}

.payment-name {
	font-size: 28rpx;
}

.epay-dialog-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 40rpx;
}

.epay-dialog-btn {
	width: 45%;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #666;
}

.confirm-btn {
	background-color: #3298FD;
	color: #fff;
}
</style>
